<template>
  <div class="schedule-container">
    <table class="schedule-table">
      <!-- 日期行 -->
      <tr class="row dates">
        <td class="cell title-cell">7月</td>
        <td v-for="day in days" :key="day" class="cell" :style="getDayStyle(day)">
          {{ day }}
        </td>
      </tr>

      <!-- 星期行 -->
      <tr class="row">
        <td class="cell title-cell">星期</td>
        <td v-for="day in days" :key="'weekday-' + day" class="cell" :style="getDayStyle(day)">
          {{ getWeekday(day) }}
        </td>
      </tr>

      <!-- 班次行 -->
      <tr v-for="(shift, index) in shiftTypes" :key="shift" class="row">
        <td class="cell title-cell">{{ shiftTitles[index] }}</td>
        <td v-for="day in days" :key="`${shift}-${day}`" class="cell" :style="getShiftStyle(day, shift)">
          {{ getWeekday(day) }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { color } from 'echarts';

// 基础样式
const baseStyle = {
  width: '39px',
  height: '47px',
  color: 'rgba(255, 255, 255, 1)',
  background: 'rgba(0, 227, 254, 0.1)',
};

// 生成1-31天的数组
const days = Array.from({ length: 31 }, (_, i) => i + 1);

// 班次类型
const shiftTitles = ['夜班', '中班', '白班'];
const shiftTypes = ['夜班', '中班', '白班'];

// 排班数据示例（可根据实际需求修改）
const shifts = ref<Record<number, string[]>>({
  3: ['星期', '夜班', '中班'],
  15: ['星期', '白班'],
  25: ['星期', '夜班', '中班', '白班']
});

// 获取星期几
const getWeekday = (day: number) => {
  const date = new Date(2024, 6, day); // 2024年7月，注意月份从0开始
  return ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];
};

// 日期行样式
const getDayStyle = (day: number) => ({
  ...baseStyle,
  background: shifts.value[day] ? 'rgba(0, 227, 254, 0.2)' : 'rgba(0, 227, 254, 0.1)'
});

// 班次行样式
const getShiftStyle = (day: number, shift: string) => ({
  ...baseStyle,
  background: shifts.value[day]?.includes(shift) ? 'rgba(0, 227, 254, 0.2)' : 'rgba(0, 227, 254, 0.1)'
});

</script>

<style scoped lang="scss">
.schedule-container {
  overflow-x: auto;
  padding: 20px;

  .schedule-table {
    border-collapse: collapse;

    .row {
      height: 47px;

      .cell {
        text-align: center;
        vertical-align: middle;
        border-bottom: 1px solid rgba(245, 245, 245, 0.2);
        font-size: 12px;
      }

      .title-cell {
        background: rgba(0, 227, 254, 0.1) !important;
        color: rgba(255, 255, 255, 1);
        font-weight: bold;
        position: sticky;
        left: 0;
        z-index: 1;
        min-width: 60px;
        /* 标题列稍宽 */
      }
    }
    .dates {
      td {
        color: rgba(0, 227, 254, 1) !important;
      }
    }
  }
}
</style>
